<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %> <!-- 태그 라이브러리 설정 -->
<%@ taglib prefix="page" uri="http://www.opensymphony.com/sitemesh/page" %>              <!-- 태그 라이브러리 설정 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
	* {float:left; margin: 0;}
	body {width:100%; text-align: center; margin: 0 auto;}
	
	#totalArea {width:100%; height: 1200px; margin-top: 50px; margin: 0 auto;}
	#topArea {width:1200px; height:100px; float: none; margin: 0 auto; margin-top: 40px; border-bottom: 2px; border-bottom-color: black; border-bottom-style: solid; float: none;}
	#topArea h1 {margin: 0 auto; float: none; text-shadow: gray; font-size: 50px;}
	
	#middleArea {width: 1200px; height:1000px; float:none; text-align: center; margin: 0 auto;}
	
	#leftArea {width : 200px; height: 100%; border-right: 2px; border-right-color: black; border-right-style: solid;}
	#userInfo {float: right; width: 200px; height: 150px; border-bottom: 1px; border-bottom-color: blue; border-bottom-style: dashed;}
	#userInfo {width: 100%; height: 110px; float:right; margin-top: 20px; padding-bottom: 20px;}
	#userInfo form {width: 100%; height: 110px;}
	#userInfo div input {float: none; margin-bottom: 10px; width: 140px;}
	
	#rightArea {width: 998px; height: 1000px;}
	#menuArea {width: 100%; height:600px; margin: 0 auto;}
	.menuBar { width:100%; height: 100%; margin-top: 15px;}
	.mainMenu {width:200px; height: 40px; text-align: center; float:left; vertical-align: middle; border:0px;}
	.mainMenu a {width:100%; height: 100%; text-decoration: none; vertical-align: middle;}
	.mainMenu a b {width:100%; vertical-align: middle; color: black; margin-top: 10px;}
	.mainMenu a:HOVER {background-color: #7755FF}
</style>

<script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
	function loginSubmit(){
		if($('#memberId').val() == null || $('#memberId').val() == ""){
			alert('ID를 입력해 주세요.');
			return false;
		}
		if($('#password').val() == null || $('#password').val() == ""){
			alert('PW를 입력해 주세요.');
			return false;
		}
		document.loginForm.submit();
	}
</script>
<title>WillThink 메인페이지</title>
</head>
<body>
	<div id="totalArea">
		<div id="topArea">
			<h1>WillThink 메인 페이지</h1>
		</div>
		
		<div id="middleArea">
			<div id="leftArea">
				<div id="userInfo">
					<c:choose>
						<c:when test="${!empty member }">
							<form method="post" action="/member/logoutProcess.think">
								<b>${member.NAME}</b> 님
								<br>환영합니다.
								<input type="submit" value="Logout">
							</form>
						</c:when>
						<c:otherwise>
							<form name="loginForm" method="post" onsubmit="loginSubmit(); return false;" action="/member/loginProcess.think">
								<div>&nbsp;&nbsp;ID : <input type="text" id="memberId" name="memberId"><br></div>
								<div>PW : <input type="password" id="password" name="password"></div>
								<input type="submit" value="Login">
							</form>
						</c:otherwise>
					</c:choose>
				</div>
				<div id="menuArea">
					<div class="menuBar" id="upperBar">
						<c:if test="${!empty list }">
							<c:forEach var="subList" items="${list}">
								<div class="mainMenu" >
									<a href="${subList.URL }"><b>${subList.MENU_NAME }</b></a>
								</div>
							</c:forEach>
						</c:if>
					</div>
				</div>
			</div>
			<div id="rightArea">
				<decorator:head/>
				<decorator:body/>
			</div>
		</div>
		
	</div>
</body>
</html>